/**
 * 指标组件
 */

// import { defineComponent } from 'vue'

// export default defineComponent({
//   name: 'TargetComponent',
//   setup() {
//     const render = async () => {
//       return <div></div>
//     }
//     return render
//   }
// })

import { defineComponent } from 'vue'
import { ElSelect, ElOption } from 'element-plus'
import useCommonApi, { Params } from '@/hooks/web/useCommonApi'
const { useIndicatorSystem, useOneLevel, useTwoLevel } = useCommonApi()

/**
 * 指标体系
 */
export const IndicatorSystem = defineComponent({
  name: 'IndicatorSystem',
  setup() {
    const render = async () => {
      const res = await useIndicatorSystem()
      return (
        <ElSelect>
          {res.map((item) => (
            <ElOption key={item.value} label={item.label} value={item.value}></ElOption>
          ))}
        </ElSelect>
      )
    }
    return render
  }
})

/**
 * 一级指标
 */
export const OneLevel = defineComponent({
  name: 'OneLevel',
  setup() {
    const render = async (categoryId: string | number, params?: Params) => {
      const res = await useOneLevel(categoryId, params)
      return (
        <ElSelect>
          {res.map((item) => (
            <ElOption key={item.value} label={item.label} value={item.value}></ElOption>
          ))}
        </ElSelect>
      )
    }
    return render
  }
})

/**
 * 二级指标
 */
export const TwoLevel = defineComponent({
  name: 'TwoLevel',
  setup() {
    const render = async (levelOneId: string | number, params?: Params) => {
      const res = await useTwoLevel(levelOneId, params)
      return (
        <ElSelect>
          {res.map((item) => (
            <ElOption key={item.value} label={item.label} value={item.value}></ElOption>
          ))}
        </ElSelect>
      )
    }
    return render
  }
})
